<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="A card is a sheet that serves as an entry point to more detailed information. The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Cards - Metro 4 :: Popular HTML, CSS and JS library</title>

    <style>
        .card {
            width: 300px;
        }
    </style>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

        <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
            <h5>Table of contents</h5>
            <hr/>
            <ul class="toc-nav">
                <li class="toc-entry"><a href="#">Cards</a></li>
                <li class="toc-entry"><a href="#_card_about">About cards</a></li>
                <li class="toc-entry"><a href="#_card_simple">Simple card</a></li>
                <li class="toc-entry"><a href="#_card_image_header">Image header</a></li>
                <li class="toc-entry"><a href="#_card_likes">Likes card</a></li>
                <li class="toc-entry"><a href="#_card_icon_box">Icon box</a></li>
                <li class="toc-entry"><a href="#_card_more_info_box">More info</a></li>
                <li class="toc-entry"><a href="#_card_skill_box">Skill box</a></li>
                <li class="toc-entry"><a href="#_card_social_box">Social box</a></li>
            </ul>

        </div>

        <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
            <div class="place-right d-none d-block-lg" style="width: 200px;">
                <img src="images/logo.png" class="w-100" alt="">
            </div>

            <h1>Cards</h1>
            <p class="text-leader">
                A card is a sheet that serves as an entry point to more detailed information.
            </p>

            <!-- ads-html -->

            <h3 id="_card_about">About cards</h3>
            <p>
                Metro 4 provides any classes to create cards. A card is a sheet that serves as an entry point to more detailed information.
                Cards may contain a photo, text, and a link about a single subject.
                They may display content containing elements of varying size, such as photos with captions of variable length.
            </p>

            <h3 id="_card_simple">Simple card</h3>
            <div class="example">
                <div class="card mx-auto">
                    <div class="card-header">
                        Card header
                    </div>
                    <div class="card-content p-2">
                        Card with header and footer. Card header is used to display card title and footer for some additional information or for custom actions.
                    </div>
                    <div class="card-footer">
                        Card Footer
                    </div>
                </div>
            </div>
            <pre><code class="html">
                    &lt;div class="card"&gt;
                        &lt;div class="card-header"&gt;
                            Card header
                        &lt;/div&gt;
                        &lt;div class="card-content p-2"&gt;
                            Card with header and footer...
                        &lt;/div&gt;
                        &lt;div class="card-footer"&gt;
                            Card Footer
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>
            <p class="remark">
                By default card have width <code>100%</code>. You can set own size for your cards.
            </p>

            <h3 id="_card_image_header">Image header</h3>
            <div class="example">
                <div class="card image-header">
                    <div class="card-header fg-white"
                         style="background-image: url(images/4.jpg)">
                        Journey To Mountains
                    </div>
                    <div class="card-content p-2">
                        <p class="fg-gray">Posted on January 21, 2015</p>
                        Quisque eget vestibulum nulla. Quisque quis dui quis ex
                        ultricies efficitur vitae non felis. Phasellus quis nibh
                        hendrerit...
                    </div>
                    <div class="card-footer">
                        <button class="button secondary">Read More</button>
                    </div>
                </div>
            </div>
            <pre><code class="html">
                    &lt;div class="card image-header"&gt;
                        &lt;div class="card-header fg-white"
                             style="background-image: url(http://lorempixel.com/1000/600/)"&gt;
                            Journey To Mountains
                        &lt;/div&gt;
                        &lt;div class="card-content p-2"&gt;
                            &lt;p class="fg-gray"&gt;Posted on January 21, 2015&lt;/p&gt;
                            Quisque eget vestibulum nulla. Quisque quis dui quis ex
                            ultricies efficitur vitae non felis. Phasellus quis nibh
                            hendrerit...
                        &lt;/div&gt;
                        &lt;div class="card-footer"&gt;
                            &lt;button class="button secondary"&gt;Read More&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

            <!-- ads-html -->

            <h3 id="_card_likes">Likes card</h3>
            <div class="example">
                <div class="row mt-2">
                    <div class="cell-md-6">
                        <div class="card">
                            <div class="card-header">
                                <div class="avatar">
                                    <img src="images/pumba.png">
                                </div>
                                <div class="name">John Doe</div>
                                <div class="date">Monday at 3:47 PM</div>
                            </div>
                            <div class="card-content">
                                <img src="images/1.jpg" style="width: 100%">
                            </div>
                            <div class="card-footer">
                                <button class="flat-button mif-thumbs-up"></button>
                                <button class="flat-button mif-tag"></button>
                                <button class="flat-button mif-share"></button>
                            </div>
                        </div>
                    </div>

                    <div class="cell-md-6">
                        <div class="card">
                            <div class="card-header">
                                <div class="avatar">
                                    <img src="images/pumba.png">
                                </div>
                                <div class="name">John Doe</div>
                                <div class="date">Monday at 3:47 PM</div>
                            </div>
                            <div class="card-content p-2">
                                What a nice photo i took yesterday!
                            </div>
                            <div class="card-content">
                                <img src="images/2.jpg" style="width: 100%">
                            </div>
                            <div class="card-content fg-gray p-2">
                                <span><small>Likes: </small>112</span>
                                <span><small>Comments: </small>43</span>
                            </div>
                            <div class="card-footer">
                                <button class="flat-button mif-thumbs-up mif-2x"></button>
                                <button class="flat-button mif-tag mif-2x"></button>
                                <button class="flat-button mif-share mif-2x"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <pre><code class="html">
                    &lt;div class="card"&gt;
                        &lt;div class="card-header"&gt;
                            &lt;div class="avatar"&gt;
                                &lt;img src="http://lorempixel.com/68/68/people/"&gt;
                            &lt;/div&gt;
                            &lt;div class="name"&gt;John Doe&lt;/div&gt;
                            &lt;div class="date"&gt;Monday at 3:47 PM&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="card-content p-2"&gt;
                            &lt;img src="http://lorempixel.com/1000/600/" style="width: 100%"&gt;
                        &lt;/div&gt;
                        &lt;div class="card-footer"&gt;
                            &lt;button class="flat-button mif-thumbs-up"&gt;&lt;/button&gt;
                            &lt;button class="flat-button mif-tag"&gt;&lt;/button&gt;
                            &lt;button class="flat-button mif-share"&gt;&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;div class="card"&gt;
                        &lt;div class="card-header"&gt;
                            &lt;div class="avatar"&gt;
                                &lt;img src="http://lorempixel.com/68/68/people/"&gt;
                            &lt;/div&gt;
                            &lt;div class="name"&gt;John Doe&lt;/div&gt;
                            &lt;div class="date"&gt;Monday at 3:47 PM&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="card-content p-2"&gt;
                            What a nice photo i took yesterday!
                        &lt;/div&gt;
                        &lt;div class="card-content"&gt;
                            &lt;img src="http://lorempixel.com/1000/600/" style="width: 100%"&gt;
                        &lt;/div&gt;
                        &lt;div class="card-content fg-gray p-2"&gt;
                            &lt;span&gt;&lt;small&gt;Likes: &lt;/small&gt;112&lt;/span&gt;
                            &lt;span&gt;&lt;small&gt;Comments: &lt;/small&gt;43&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class="card-footer"&gt;
                            &lt;button class="flat-button mif-thumbs-up mif-2x"&gt;&lt;/button&gt;
                            &lt;button class="flat-button mif-tag mif-2x"&gt;&lt;/button&gt;
                            &lt;button class="flat-button mif-share mif-2x"&gt;&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

            <h3 id="_card_icon_box">Icon box</h3>
            <div class="example">
                <div class="row mt-2">
                    <div class="cell-md-4 mt-4">
                        <div class="icon-box border bd-default">
                            <div class="icon bg-cyan fg-white"><span class="mif-cog"></span></div>
                            <div class="content p-4">
                                <div class="text-upper">cpu traffic</div>
                                <div class="text-upper text-bold text-lead">90%</div>
                            </div>
                        </div>
                    </div>
                    <div class="cell-md-4 mt-4">
                        <div class="icon-box border bd-default">
                            <div class="icon bg-red fg-white"><span class="mif-google-plus"></span></div>
                            <div class="content p-4">
                                <div class="text-upper">likes</div>
                                <div class="text-upper text-bold text-lead">41,410</div>
                            </div>
                        </div>
                    </div>
                    <div class="cell-md-4 mt-4">
                        <div class="icon-box border bd-default">
                            <div class="icon bg-green fg-white"><span class="mif-cart"></span></div>
                            <div class="content p-4">
                                <div class="text-upper">sales</div>
                                <div class="text-upper text-bold text-lead">1024</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="cell-md-4 mt-4">
                        <div class="icon-box bg-cyan fg-white">
                            <div class="icon"><span class="mif-bookmark"></span></div>
                            <div class="content">
                                <div class="p-2">
                                    <div>BOOKMARKS</div>
                                    <div class="text-bold text-leader">41,400</div>
                                </div>
                                <div data-role="progress" data-value="75" data-small="true" data-cls-bar="bg-white" data-cls-back="bg-darkCyan"></div>
                                <div class="pl-2 pr-2">
                                        <span class="text-small">
                                            70% Increase in 30 Days
                                        </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cell-md-4 mt-4">
                        <div class="icon-box bg-green fg-white">
                            <div class="icon"><span class="mif-thumbs-up"></span></div>
                            <div class="content">
                                <div class="p-2">
                                    <div>LIKES</div>
                                    <div class="text-bold text-leader">41,400</div>
                                </div>
                                <div data-role="progress" data-value="75" data-small="true" data-cls-bar="bg-white" data-cls-back="bg-darkGreen"></div>
                                <div class="pl-2 pr-2">
                                        <span class="text-small">
                                            70% Increase in 30 Days
                                        </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cell-md-4 mt-4">
                        <div class="icon-box bg-orange fg-white">
                            <div class="icon"><span class="mif-calendar"></span></div>
                            <div class="content">
                                <div class="p-2">
                                    <div>EVENTS</div>
                                    <div class="text-bold text-leader">41,400</div>
                                </div>
                                <div data-role="progress" data-value="75" data-small="true" data-cls-bar="bg-white" data-cls-back="bg-darkOrange"></div>
                                <div class="pl-2 pr-2">
                                        <span class="text-small">
                                            70% Increase in 30 Days
                                        </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <pre><code>
                    &lt;div class="icon-box border bd-default"&gt;
                        &lt;div class="icon bg-cyan fg-white"&gt;&lt;span class="mif-cog"&gt;&lt;/span&gt;&lt;/div&gt;
                        &lt;div class="content p-4"&gt;
                            &lt;div class="text-upper"&gt;cpu traffic&lt;/div&gt;
                            &lt;div class="text-upper text-bold text-lead"&gt;90%&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;div class="icon-box bg-orange fg-white"&gt;
                        &lt;div class="icon"&gt;&lt;span class="mif-calendar"&gt;&lt;/span&gt;&lt;/div&gt;
                        &lt;div class="content"&gt;
                            &lt;div class="p-2"&gt;
                                &lt;div&gt;EVENTS&lt;/div&gt;
                                &lt;div class="text-bold text-leader"&gt;41,400&lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div data-role="progress"
                                data-value="75"
                                data-small="true"
                                data-cls-bar="bg-white"
                                data-cls-back="bg-darkOrange"&gt;&lt;/div&gt;
                            &lt;div class="pl-2 pr-2"&gt;
                                &lt;span class="text-small"&gt;
                                    70% Increase in 30 Days
                                &lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

            <h3 id="_card_more_info_box">More info box</h3>
            <div class="example">
                <div class="row">
                    <div class="cell-md-6 mt-4">
                        <div class="more-info-box bg-cyan fg-white">
                            <div class="content">
                                <h2 class="text-bold mb-0">150</h2>
                                <div>New Orders</div>
                            </div>
                            <div class="icon">
                                <span class="mif-cart"></span>
                            </div>
                            <a href="#" class="more"> More info <span class="mif-arrow-right"></span></a>
                        </div>
                    </div>
                    <div class="cell-md-6 mt-4">
                        <div class="more-info-box bg-green fg-white">
                            <div class="content">
                                <h2 class="text-bold mb-0">53%</h2>
                                <div>Bounce Rate</div>
                            </div>
                            <div class="icon">
                                <span class="mif-chart-bars"></span>
                            </div>
                            <a href="#" class="more"> More info <span class="mif-arrow-right"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <pre><code>
                    &lt;div class="more-info-box bg-green fg-white"&gt;
                        &lt;div class="content"&gt;
                            &lt;h2 class="text-bold mb-0"&gt;53%&lt;/h2&gt;
                            &lt;div&gt;Bounce Rate&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="icon"&gt;
                            &lt;span class="mif-chart-bars"&gt;&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;a href="#" class="more"&gt; More info &lt;span class="mif-arrow-right"&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;/div&gt;
                </code></pre>

            <h3 id="_card_skill_box">Skill box</h3>
            <div class="example">
                <div class="row">
                    <div class="cell-md-6">
                        <div class="skill-box">
                            <div class="header bg-orange fg-white">
                                <img src="images/jeki_chan.jpg" class="avatar">
                                <div class="title">Jackie Chan</div>
                                <div class="subtitle">Cool Men</div>
                            </div>
                            <ul class="skills">
                                <li>
                                    <span>Kung-Fu</span>
                                    <span class="float-right">90%</span>
                                    <div data-role="progress" data-value="90" data-small="true"></div>
                                </li>
                                <li>
                                    <span>Karate Do</span>
                                    <div data-role="progress" data-value="75" data-small="true" data-cls-bar="bg-cyan"></div>
                                </li>
                                <li>
                                    <span>Dancing</span>
                                    <div data-role="progress" data-value="35" data-small="true" data-cls-bar="bg-red"></div>
                                </li>
                                <li>
                                    <span>Singing</span>
                                    <div data-role="progress" data-value="45" data-small="true" data-cls-bar="bg-orange"></div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="cell-md-6">
                        <div class="skill-box">
                            <div class="header bg-green fg-white">
                                <img src="images/jek_vorobey.jpg" class="avatar">
                                <div class="title">Jack Sparrow</div>
                                <div class="subtitle">Pirate captain</div>
                            </div>
                            <ul class="skills">
                                <li>
                                    <span>Projects</span>
                                    <span class="badge bg-orange fg-white">25</span>
                                </li>
                                <li>
                                    <span>Tasks</span>
                                    <span class="badge bg-cyan fg-white">5</span>
                                </li>
                                <li>
                                    <span>Completed Projects</span>
                                    <span class="badge bg-green fg-white">21</span>
                                </li>
                                <li>
                                    <span>Followers</span>
                                    <span class="badge bg-red fg-white">1024</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <pre><code>
                    &lt;div class="skill-box"&gt;
                        &lt;div class="header bg-orange fg-white"&gt;
                            &lt;img src="images/jeki_chan.jpg" class="avatar"&gt;
                            &lt;div class="title"&gt;Jackie Chan&lt;/div&gt;
                            &lt;div class="subtitle"&gt;Cool Men&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;ul class="skills"&gt;
                            &lt;li&gt;
                                &lt;span&gt;Kung-Fu&lt;/span&gt;
                                &lt;span class="float-right"&gt;90%&lt;/span&gt;
                                &lt;div data-role="progress" data-value="90" data-small="true"&gt;&lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;span&gt;Karate Do&lt;/span&gt;
                                &lt;div data-role="progress" data-value="75" data-small="true" data-cls-bar="bg-cyan"&gt;&lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;span&gt;Dancing&lt;/span&gt;
                                &lt;div data-role="progress" data-value="35" data-small="true" data-cls-bar="bg-red"&gt;&lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;span&gt;Singing&lt;/span&gt;
                                &lt;div data-role="progress" data-value="45" data-small="true" data-cls-bar="bg-orange"&gt;&lt;/div&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                </code></pre>

            <pre><code>
                    &lt;div class="skill-box"&gt;
                        &lt;div class="header bg-green fg-white"&gt;
                            &lt;img src="images/jek_vorobey.jpg" class="avatar"&gt;
                            &lt;div class="title"&gt;Jack Sparrow&lt;/div&gt;
                            &lt;div class="subtitle"&gt;Pirate captain&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;ul class="skills"&gt;
                            &lt;li&gt;
                                &lt;span&gt;Projects&lt;/span&gt;
                                &lt;span class="badge bg-orange fg-white"&gt;25&lt;/span&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;span&gt;Tasks&lt;/span&gt;
                                &lt;span class="badge bg-cyan fg-white"&gt;5&lt;/span&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;span&gt;Completed Projects&lt;/span&gt;
                                &lt;span class="badge bg-green fg-white"&gt;21&lt;/span&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;span&gt;Followers&lt;/span&gt;
                                &lt;span class="badge bg-red fg-white"&gt;1024&lt;/span&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                </code></pre>

            <h3 id="_card_social_box">Social box</h3>
            <div class="example">
                <div class="row">
                    <div class="cell-md-6 mx-auto">
                        <div class="social-box">
                            <div class="header bg-cyan fg-white">
                                <img src="images/shvarcenegger.jpg" class="avatar">
                                <div class="title">Arnold Shvarcenegger</div>
                                <div class="subtitle">Terminator</div>
                            </div>
                            <ul class="skills">
                                <li>
                                    <div class="text-bold">6</div>
                                    <div>AWARDS</div>
                                </li>
                                <li>
                                    <div class="text-bold">4</div>
                                    <div>NOMINATIONS</div>
                                </li>
                                <li>
                                    <div class="text-bold">36</div>
                                    <div>FILMS</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <pre><code>
                    &lt;div class="social-box"&gt;
                        &lt;div class="header bg-cyan fg-white"&gt;
                            &lt;img src="images/shvarcenegger.jpg" class="avatar"&gt;
                            &lt;div class="title"&gt;Arnold Shvarcenegger&lt;/div&gt;
                            &lt;div class="subtitle"&gt;Terminator&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;ul class="skills"&gt;
                            &lt;li&gt;
                                &lt;div class="text-bold"&gt;6&lt;/div&gt;
                                &lt;div&gt;AWARDS&lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;div class="text-bold"&gt;4&lt;/div&gt;
                                &lt;div&gt;NOMINATIONS&lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;div class="text-bold"&gt;36&lt;/div&gt;
                                &lt;div&gt;FILMS&lt;/div&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                </code></pre>

        </main>
    </div>

</div>

<script src="docsearch/docsearch.min.js"></script>


<script src="metro/js/metro.js?ver=@@b-version"></script>
<script src="highlight/highlight.pack.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/site.js"></script>
<!-- ads-script -->
<!-- ga-script -->
<!-- hit-ua -->
</body>
</html>